<template>
  <view class="container">
    <view class="content">
      <view class="content-top">
        <!-- <view class="content-top-one d-rn d-ac d-jb">
          <text>打卡时间</text>
          <text style="color: #ff0000">{{
            info.punchType == 1 ? info.signInTime : info.signOutTime
          }}</text>
        </view> -->
        <view class="content-top-one d-rn d-ac d-jb" @click="handleOpenTime">
          <text>{{ $t('reissue_card_time1') }}</text>
          <view class="content-top-one-right d-rn d-ac">
            <text>{{ updateTime }}</text>
            <image src="../../static/img/right.png" mode=""></image>
          </view>
        </view>
        <!-- <view class="content-top-one d-rn d-ac d-jb" @click="handleOpenType">
          <text>修改时间段</text>
          <view class="content-top-one-right d-rn d-ac">
            <text>{{ typeName }}</text>
            <image src="../../static/img/right.png" mode=""></image>
          </view>
        </view> -->
      </view>
      <view class="content-min">
        <view class="content-min-title">
          <text>{{ $t('reason1') }}</text>
        </view>
        <view class="content-min-text">
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            :placeholder="$t('reissue_card_reason')"
            placeholder-style="color:#CCCCCC;"
            v-model="form.remark"
          ></textarea>
        </view>
        <view class="content-min-upload" @click="upLoadImage">
          <image
            :src="form.pic ? form.pic : '../../static/img/upload.png'"
            mode=""
          ></image>
        </view>
      </view>
      <view class="content-bto">
        <view class="content-bto-title">
          <text>{{ $t('approval_flow') }}</text>
        </view>
        <view class="">
          <u-steps dot direction="column" :current="current" class="stepbox">
            <u-steps-item v-for="(item, index) in stepList" :key="index">
              <view class="stepbox-big d-rn" slot="desc">
                <view>
                  <image :src="baseUrl + item.approveAvatar" mode=""></image>
                </view>
                <view class="stepbox-big-word d-cw">
                  <text
                    >{{ item.approveName }} <text>{{ item.zhiweu }}</text>
                  </text>
                  <text v-if="item.sts">{{
                    !item.sts ? $t('approval_in_progress') : item.sts == 1 ? $t('approved') : $t('rejected_approval')
                  }}</text>
                </view>
              </view>
            </u-steps-item>
          </u-steps>
        </view>
      </view>
    </view>

    <view class="">
      <u-datetime-picker
        :show="showTime"
        v-model="value"
        mode="time"
        @cancel="handleCancel"
        @confirm="handleChooseTime"
      ></u-datetime-picker>
    </view>
    <view class="footer d-rn d-ac d-jc" @click="handleSubmit">
      <text class="d-rn d-ac d-jc">{{ $t('Save') }}</text>
    </view>
  </view>
</template>

<script>
var _self;
import { attendanceCardApply, getApprovalName } from "../../api/index.js";
import request from "@/request/config.js";
export default {
  data() {
    return {
      showTime: false,
      showType: false,
      updateTime: this.$t('Please_select_card_time'),
      value: null,
      current: 0,
      stepList: [],
      baseUrl: request.baseUrl,
      info: {},
      form: {
        remark: "",
        pic: "",
      },

      typeName: "",
    };
  },
  onLoad(options) {
		console.log('options',JSON.parse(decodeURIComponent(options.data)))
    _self = this;
    if (options && options.data) {
      _self.info = JSON.parse(decodeURIComponent(options.data));
    }
    _self.getgetApprovalName();
  },
  methods: {
    // 获取审批流程
    getgetApprovalName() {
      getApprovalName({
        incident: 3,
      }).then((res) => {
        if (res.code == 200) {
          _self.stepList = res.data;
        }
      });
    },
    handleOpenTime() {
      _self.showTime = true;
    },
    handleChooseTime(e) {
      _self.showTime = false;
      _self.updateTime = e.value;
    },
    handleCancel() {
      _self.showTime = false;
      _self.showType = false;
    },
    handleOpenType() {
      _self.showType = true;
    },
    handleSubmit() {
      if (_self.updateTime == this.$t('Please_select_card_time')) {
        uni.$u.toast(this.$t('Please_select_card_time'));
        return;
      }
      uni.showModal({
        title: this.$t('prompt'),
        content: this.$t('submit_confirm'),
        success: (mode) => {
          if (mode.cancel) return;
          _self.form.punchTime = _self.updateTime;
          _self.form.attendanceRecordId = _self.info.id;
          this.form.punchForm = this.info.punchType;
          this.form.shiftId = this.info.shiftId;
          this.form.punchDate = this.info.punchDate;
          attendanceCardApply(_self.form).then((res) => {
            if (res.code == 200) {
              _self.$commonFun.showTips(res.msg);
              setTimeout(function () {
                _self.$commonFun.goUrl(2, "../clockIn/index");
              }, 1000);
            }
          });
        },
      });
    },
    handleChooseType(e) {
      _self.form.clockType = e.value[0].id;
      _self.typeName = e.value[0].label;
      _self.showType = false;
    },
    // 上传图片
    upLoadImage() {
      let upInfo = {
        baseUrl: this.baseUrl + "/common/upload",
        baseName: "file",
        token: uni.getStorageSync("AUTHORIZATION"),
      };
      _self.$commonFun.handleUpImg(1, upInfo, 1).then((res) => {
        // 把res中http://替换成https://
					res = res.replace("http://", "https://");
        _self.form.pic = res;
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  .footer {
    width: 100%;
    height: 134rpx;
    background-color: #ffffff;
    position: fixed;
    bottom: 0%;
    left: 0%;

    text {
      width: 702rpx;
      height: 86rpx;
      background: #fed72e;
      border-radius: 43px;
      box-shadow: 0px 4px 8px 0px rgba(250, 222, 78, 0.5);
    }
  }
  .content {
    width: 100%;

    &-top {
      background-color: #ffffff;

      &-one {
        padding: 30rpx 24rpx;
        box-sizing: border-box;
        border-bottom: 1px solid #eeeeee;

        text {
          font-size: 28rpx;
          color: #6c6c6c;
        }

        image {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }

    &-min {
      width: 100%;
      padding: 30rpx 24rpx;
      box-sizing: border-box;
      margin: 24rpx 0;
      background-color: #ffffff;

      &-title {
        text {
          font-size: 30rpx;
          color: #333333;
          margin-bottom: 12rpx;
        }
      }

      &-text {
        textarea {
          width: 100%;
          color: #333;
        }
      }

      &-upload {
        image {
          width: 136rpx;
          height: 136rpx;
        }
      }
    }

    &-bto {
      width: 100%;
      padding: 30rpx 24rpx;
      box-sizing: border-box;
      margin: 24rpx 0;
      background-color: #ffffff;

      .stepbox {
        padding: 40rpx;
        box-sizing: border-box;
        &-big {
          padding: 0 70rpx 60rpx 30rpx;
          box-sizing: border-box;
          image {
            width: 100rpx;
            height: 100rpx;
            margin-right: 30rpx;
          }
          &-word {
            text:nth-of-type(1) {
              font-size: 30rpx;
              font-weight: 500;
              color: #333333;
              text {
                font-size: 26rpx;
                margin-left: 20rpx;
              }
            }
            text:nth-of-type(2) {
              font-size: 30rpx;
              font-weight: 500;
              color: #999999;
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
